<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于layui、zTree的下拉树控件</title>

<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<link rel="stylesheet" href="https://unpkg.com/layui@2.9.14/dist/css/layui.css">
<style>
#demoContainer .layui-row {
  padding-bottom: 10px;
}
#demoContainer .layui-col-md6,
#demoContainer .layui-col-md4 {
  padding-left: 10px;
}
</style>

</head>
<body>

<div id="demoContainer" class="layui-container" style="padding: 30px 0;">
  <blockquote class="layui-elem-quote" style="color: #666;">
    请自行下载Layui库，layui支持2.7.x、2.8.x、2.9.x版本，其它版本没有测试过。
  </blockquote>
  <div class="layui-row" style="padding-bottom: 10px;">
    <div class="layui-col-md6">
      <label class="layui-form-label">多选</label>
      <div class="layui-input-block">
        <div id="dept1"></div>
      </div>
    </div>
    <div class="layui-col-md6">
      <button id="setValueBtn" class="layui-btn">设置值</button>
      <button id="getValueBtn" class="layui-btn">显示选中值</button>
    </div>
  </div>
  <div class="layui-row" style="padding-bottom: 10px;">
    <div class="layui-col-md6">
      <label class="layui-form-label">单选</label>
      <div class="layui-input-block">
        <div id="dept2"></div>
      </div>
    </div>
  </div>
</div>

<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<script src="https://unpkg.com/layui@2.9.14/dist/layui.js"></script>
<script>
  layui.config({
    base: './'
  }).extend({
    combotree: 'combotree'
  });
  layui.use(['combotree', 'layer'], function () {
    var $ = layui.$;
    var combotree = layui.combotree;
    var layer = layui.layer;

    // test
    var treeTestData = [
      { "id": 1, "name": "XXXX公司", "pid": null },
      { "id": 2, "name": "软件研发部", "pid": 1 },
      { "id": 40, "name": "软件研发1部", "pid": 2 },
      { "id": 41, "name": "软件研发2部", "pid": 2 },
      { "id": 42, "name": "软件研发3部", "pid": 2 },
      { "id": 43, "name": "软件研发4部", "pid": 2 },
      { "id": 3, "name": "系统集成部", "pid": 1 },
      { "id": 40, "name": "系统集成1部", "pid": 3 },
      { "id": 41, "name": "系统集成2部", "pid": 3 },
      { "id": 42, "name": "系统集成3部", "pid": 3 },
      { "id": 43, "name": "系统集成4部", "pid": 3 },
      { "id": 44, "name": "系统集成5部", "pid": 3 },
      { "id": 45, "name": "系统集成6部", "pid": 3 },
      { "id": 46, "name": "系统集成7部", "pid": 3 },
    ];
    // 渲染多选组织
    combotree.render({
      elem: '#dept1'
      , isMultiple: true
      , expandLevel: 2
      , yChkboxType: 's'
      , nChkboxType: 's'
      , data: treeTestData
    });
    // 渲染单选组织
    combotree.render({
      elem: '#dept2'
      , isMultiple: false
      , expandLevel: 2
      , yChkboxType: 's'
      , nChkboxType: 's'
      , data: treeTestData
    });
    // 监听check事件
    combotree.on('check(dept1)', function (obj) {
      console.log('dept1 node checked!', obj);
    });
    // 监听click事件
    combotree.on('click(dept1)', function (obj) {
      console.log('dept1 node clicked!', obj);
    });
    // 监听check事件
    combotree.on('check(dept2)', function (obj) {
      console.log('dept2 node checked!', obj);
    });
    // 监听click事件
    combotree.on('click(dept2)', function (obj) {
      console.log('dept2 node clicked!', obj);
    });
    // 监听设置值button被点击事件
    $('#setValueBtn').click(function(){
      combotree.setValue('dept1', '40,41');
    });
    $('#getValueBtn').click(function(){
      layer.msg(combotree.getValue('dept1'));
    });
  });
</script>
</body>
</html>
